<template>
	<div class="flex" style="border-left: 1px #eaeaea solid; border-bottom: 1px #eaeaea solid; border-right: 1px #eaeaea solid;">

    <div class="zuobian" style="width: 380px; height: calc(100vh - 105px); border-right:1px #eaeaea solid; overflow: auto; position: relative;">
       <div style="height: 50%; overflow: auto; border-bottom: 5px rgb(234, 234, 234) solid; padding: 20px;">

         <el-tree  class="filter-tree" @node-click="handleNodeClick" :data="data" :props="defaultProps" node-key="treeId"
                   :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
         </el-tree>
       </div>
       <div style="position: absolute; left: 0; bottom: 0; background: #fff; width: 100%; height: calc(50% - 10px); overflow: auto;">
        <div>
          <el-table  ref="multipleTable"  :data="tableData"  tooltip-effect="dark"  style="width: 100%"  @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="time" label="采样时间"></el-table-column>
              <el-table-column prop="zhi" label="采样值"></el-table-column>
              <el-table-column prop="hao" label="仪器序列号"></el-table-column>
              <el-table-column prop="beizhu" label="备注"></el-table-column>
            </el-table>
        </div>
      </div>
    </div>

    <div class="youbian" style="padding: 20px; width: calc(100vw - 680px);">
      <div id="main2" style="width: 100%; height: 500px;"></div>
    </div>



    <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >
      <div class="li" @click="shiyuzhibiaolog = true" >时域指标信息</div>
      <div class="li" @click="shiyuzhibiaolog2 = true" >工艺量均值</div>
    </div>

    <el-dialog title="时域指标信息" center :visible.sync="shiyuzhibiaolog" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <el-table :data="data"  style="width: 100%" >
        <el-table-column align="center" prop="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="index" label="指标名称"></el-table-column>
        <el-table-column align="center" prop="index" label="指标值"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="工艺量均值" center :visible.sync="shiyuzhibiaolog2" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <el-table :data="data"  style="width: 100%" >
        <el-table-column align="center" prop="index" label="工艺量名称"></el-table-column>
        <el-table-column align="center" prop="index" label="值"></el-table-column>
        <el-table-column align="center" prop="index" label="采集时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { gettree } from '@/api/xitong'
	export default {
		name: 'left',
		data() {
			return {
        filterText:"",
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menuVisible: false,
        shiyuzhibiaolog:false,
        shiyuzhibiaolog2:false,
        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[],

        tableData:[
          {
            time:'2024-5-21',
            zhi:"12123",
            hao:"12123",
            beizhu:"123123"
          }
        ],

        myChart:"",
        youjiandangqian:"",

			}
		},
		created() {
      this.getlist()
		},
		mounted() {
      this.shengchengtu()
		},
		methods: {
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },

      handleSelectionChange:function(){

      },
      shengchengtu:function(){
        this.option = {
          toolbox: {
                  feature: {
                      contextMenu: {
                          // 自定义右键菜单项
                          itemList: ['saveAsImage', 'dataView', 'restore', 'dataZoom', 'magicType']
                      }
                  }
              },
          title: {
            text: '测点图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['测点1', '测点2', '测点3', '测点4', '测点5']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: [0.2842,0.3127,0.341,0.3691,0.397,0.4247,0.4521,0.4793,0.5061,0.5327,0.559,0.5848,0.6103,0.6354,0.6602,0.6848,0.7088,0.7322,0.7552,0.7778,0.8,0.8218,0.8431,0.8638,0.8839,0.9035,0.9226,0.9411,0.959,0.9765,0.9934,1.0095,1.0248,1.0393,1.0535,1.0672,1.0805,1.0931,1.1049,1.116,1.1264,1.1361,1.1452,1.1536,1.1614,1.1686,1.1749,1.1803,1.1848,1.1886,1.1919,1.1946,1.1965,1.1977,1.1982,1.1981,1.1972,1.1955,1.1932,1.1903,1.1865,1.1819,1.1764,1.1703,1.1636,1.1563,1.1483,1.1395,1.13,1.1197,1.1087,1.097,1.0848,1.0721,1.0589,1.0452,1.0306,1.0151,0.999,0.9823,0.9652,0.9476,0.9293,0.9104,0.8909,0.8709,0.8504,0.8294,0.808,0.7861,0.7637,0.7406,0.7171,0.6932,0.6689,0.6442,0.6193,0.5939,0.5681,-0.3555,-0.3272,-0.2988,-0.2701,-0.2414,-0.2124,-0.1833,-0.1541,-0.1248,-0.0954,-0.0661,-0.0368,-0.0075,0.0218,0.0511,0.0805,0.1098,0.1392,0.1685,0.1976,0.2266,0.2555,0.542,0.5155,0.4889,0.4619,0.4347,0.4072,0.3794,0.3512,0.3229,0.2944,0.2657,0.2369,0.208,0.1789,0.1498,0.1205,0.0911,0.0617,0.0324,0.0031,-0.0262,-0.0555,-0.0848,-0.114,-0.1433,-0.1725,-0.2017,-0.2307,-0.2596,-0.2884,-0.3169,-0.3452,-0.3733,-0.4013,-0.429,-0.4565,-0.4837,-0.5104,-0.5368,-0.5628,-0.5885,-0.6141,-0.6393,-0.6641,-0.6884,-0.7123,-0.7357,-0.7588,-0.7815,-0.8038,-0.8256,-0.8467,-0.8671,-0.887,-0.9065,-0.9254,-0.9438,-0.9618,-0.9792,-0.996,-1.0122,-1.0276,-1.0425,-1.0566,-1.0702,-1.0833,-1.0958,-1.1074,-1.1181,-1.1282,-1.1378,-1.1469,-1.1553,-1.1629,-1.1697,-1.1758,-1.1812,-1.1858,-1.1898,-1.1931,-1.1957,-1.1974,-1.1984,-1.1986,-1.1982,-1.1972,-1.1955,-1.1932,-1.19,-1.1859,-1.1811,-1.1757,-1.1698,-1.1631,-1.1557,-1.1476,-1.1388,-1.1291,-1.1185,-1.1073,-1.0956,-1.0833,-1.0706,-1.0572,-1.0431,-1.0284,-1.0129,-0.9968,-0.9801,-0.9629,-0.9452,-0.9268,-0.9079,-0.8885,-0.8685,-0.8479,-0.8267,-0.805,-0.7828,-0.7602,-0.7371,-0.7136,-0.6897,-0.6653,-0.6407,-0.6157,-0.5903,-0.5645,-0.5382,-0.5117,-0.485,-0.4579,-0.4306,-0.4029,-0.375]
            }
          ]
        };

        if(this.myChart){
          this.myChart.setOption(this.option);
        }else{
          var chartDom = document.getElementById('main2');
          this.myChart = echarts.init(chartDom);
          this.myChart.setOption(this.option);

          var that = this
          chartDom.addEventListener('contextmenu', function(event) {

              event.preventDefault();

              that.menuPosition.x = event.clientX;
              that.menuPosition.y = event.clientY;
              that.menuVisible = true;

              console.log(that.menuVisible)

              document.addEventListener('click', that.closeMenu);
          });
        }
      },


      handleCommand:function(val){
        this.youjiandangqian = ''
        // switch (val){
        //   case 'addzuzhi':
        //     this.addzuzhi()
        //     break;
        //   case 'addshebei':
        //     this.addshebei()
        //     break;
        //   case 'dingyizu':
        //     this.$router.push('/xitong/dingyizu')
        //     break;
        //   case 'tuku':
        //     this.$router.push('/xitong/tuku')
        //     break;
        // }
      },


      handleNodeExpand(data, node, instance) {

        // 当节点展开时，将节点的 key 添加到 expandedKeys 数组中
        this.zhankaiarray.push(data.treeId);
        console.log(this.zhankaiarray)
      },
      handleNodeCollapse(data, node, instance) {
        // 当节点折叠时，将节点的 key 从 expandedKeys 数组中移除
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
        console.log(this.zhankaiarray)
      },
      handleNodeClick(data) {
        // this.menuVisible = false;
        // console.log(this.menuVisible)

        // this.$store.commit('changeshowwho',"")
        // this.$nextTick(()=>{
        //   this.$store.commit('changeshowwho',data)
        //   console.log(this.$store.state.showwho)
        // })

      },
      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
      getlist:function(){
        gettree().then(response => {
          this.data = response.data
        })
      }
		}
	}
</script>


<style scoped lang="less">

  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }

</style>
